
<script setup>
import { reactive, ref, toRaw } from 'vue';
const open = ref(true);

const props = defineProps({
    title: {
        type: String,
        default: '标题',
    },
    isOpen: {
        type: Boolean,
        required:true,
        default: false,
    },
    width:{
        type: String,
    },
})
const emit=defineEmits(["ok","cancel"])

const handleOk = e => {
    emit('ok')
};
const onSubmit = () => {
    
};
const handleCancel=e=>{
    emit('cancel')
}
defineExpose({ })
</script>
<template>
    <a-modal v-model:open="props.isOpen" :centered="true" :closable="false"  :footer="null" :width="width">
        <div class="modal-title"><i></i>{{ title }}</div>
        <div class="content">
            <slot name="content"></slot>
        </div>
        <div class="foot">
            <a-button @click="handleCancel">取消</a-button>
            <a-button type="primary" @click="handleOk">确认</a-button>
        </div>
    </a-modal>
</template>

<style lang='scss' scoped>
.modal-title {
    display: flex;
    align-items: center;
    i {
        display: block;
        width: 4px;
        height: 15px;
        font-size: 16px;
        background: var(--themeColor);
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        margin-right: 10px;
    }
}
.content{
    padding: 14px;
    min-height: 150px;
}
.foot{
    display: flex;
    justify-content: right;
    button{
       &:nth-child(1){
        margin-right: 15px;
       }
    }
}
</style>